<template>
  <div style="background: rgb(3, 13, 72);min-height: 100vh;position: relative">
    <headerBox :countyTotal="countyTotal"  ref="headerBox"></headerBox>
    <div class="news" :style="{background: bgColor}">
    <div class="news-box" style="flex-direction: column">
      <div class="tips">当前位置：<router-link to="/map">首页</router-link>  >
        <router-link to="/news">新闻列表</router-link>  >
        <router-link :to="'/news?newsType='+newsObj.newsType" v-if="typeName">{{typeName}}</router-link>
        <router-link :to="'/news?bannerType=2'" v-else>首页产经新闻</router-link>
        > 正文</div>
      <div class="news-title">{{newsObj.newsTitle}}</div>
    </div>
      <div class="news-box">
        <div class="news-left">

          <div class="news-message"><span>发布时间：{{newsObj.createTime}}</span></div>
          <div class="news-content">
            <div v-html="newsObj.newsContent"></div>
          </div>
        </div>
        <div class="news-right">
          <div class="news-new-title">最新新闻</div>
          <div class="news-new-list">
            <ul>
              <li v-for="(item,index) in newsList">
                <div class="date">
                  <i>{{item.number}}</i>
                  <p>{{item.year}}</p>
                </div>
                <div class="word">
                  <router-link :to="{path:'/news/details',query:{newsId:item.newsId}}"  >
                    {{item.newsTitle}}
                  </router-link>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="funBtns">
      <img class="back" src="../../../assets/images/back.png" @click="back">
      <img class="Home" src="../../../assets/images/home.png" @click="backHome">
      <img class="goAhead" src="../../../assets/images/goAhead.png" @click="goAhead">
    </div>
    <footerBox/>
  </div>


</template>

<script>
import { getNewsQuery, listNewsQuery } from '../../../api/system/news'
import { getDicts } from '../../../api/system/dict/data'
import { screenHeight } from '@/utils/utils'
import footerBox from '@/components/footer'
import headerBox from '@/components/HomePart/header_top'
import { getBanner } from '../../../api/system/banner'
const { bgColor } = require('../../../utils/globalCss')
export default {
  name: 'News_details',
  components:{
    footerBox,headerBox
  },
  data() {
    return {
      bgColor,
      newsObj: {
        title: '',
        content: '',
        time: ''
      },
      newsId: null,
      bannerId:null,
      newsList:[],
      typeName:'',
      header_img: require('../../../assets/images/head_bg.png'),
      countyTotal:0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
    }
  },
  created() {
    this.newsId = this.$route.query.newsId
    this.bannerId = this.$route.query.bannerId
    this.getList()
    if(this.newsId){
      this.getNews()
    }else{
      this.getBannerDetails()
    }
  },
  mounted() {

  },
  methods:{
    goAhead() {
      this.$router.forward();
    },
    back() {
      this.$router.back();
      // this.$router.push('/news?newsType=0')
    },
    backHome() {
      this.$router.push("/map")
    },
    hideBoxFn(){
      const headerHeight = document.querySelector('header').offsetHeight
      this.centerHeight = screenHeight() - headerHeight * 2
    },
    //获取行文详情
    getNews() {
      getNewsQuery(this.newsId).then(res => {
        this.newsObj = res.data
        getDicts("sys_map_news_type").then(response => {
          const array = response.data
          const name =  array.filter(item => item.dictSort=this.newsObj.newsId)
          this.typeName = name[0].dictLabel
        })
      })
    },
    getBannerDetails(){
      getBanner(this.bannerId).then(response => {
        this.newsObj = {
          newsTitle:response.data.bannerTitle,
          newsContent:response.data.bannerContent,
          createTime:response.data.createTime
        }
        console.log( this.newsObj," this.newsObj")
      })
    },
    //获取新闻列表
    getList: function() {
      listNewsQuery(this.queryParams).then(res => {
        this.newsList = res.rows.map(item => {
          return {
            newsTitle: item.newsTitle,
            year: item.createTime.substring(2,4) + "/" + item.createTime.substring(5,7),
            number:item.createTime.substring(8,10)
          }
        })
        this.total = res.total
      })
    }

  },
  watch: {
    '$route' (to, from) {
      this.newsId = this.$route.query.newsId
      this.bannerId = this.$route.query.bannerId
      if(this.newsId){
        this.getNews()
      }else if(this.bannerId){
        this.getBannerDetails()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.news-content{
  margin-bottom: 3rem;
  padding:.5rem;
  ::v-deep img{
    max-width: 80%;
  }
}
.funBtns{
  position: absolute;
  bottom: 1rem;
  left: 40%;
  transform: translateX(-50%);
  display: flex;
  width: 110px;
  justify-content: space-between;
  z-index: 99999;
  .back {
    position: absolute;
    left: 50px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    opacity: .5;
    cursor: pointer;
  }

  .goAhead {
    position: absolute;
    left: 200px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    cursor: pointer;
    opacity: .5;
  }

  .Home {
    position: absolute;
    left: 130px;
    z-index: 99999;
    bottom: 20px;
    color: #fff;
    line-height: 50px;
    width: 50px;
    opacity: .5;
    cursor: pointer;
  }
}
.news {
  width: 100%;

  .news-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .tips {
      line-height: 60px;
      color: #2CA6B5;
      font-size: .25rem;
    }
    .news-title {
      text-align: center;
      font-size: .5rem;
      line-height: 30px;
      width: 790px;
      font-weight: bolder;
      color: #fff;
    }

    .news-left {
      width: 790px;
      .news-content{
        background: #fff;
        min-height: 500px;

      }


      .news-message {
        height: 50px;
        line-height: 50px;
        background-color: #2389A3;
        color: #fff;
        font-size: .3rem;
        margin: 20px 0 0;
        padding: 0 15px;
        box-sizing: border-box;
      }
    }

    .news-right {
      width: 370px;
      margin-top: 20px;
      .news-new-title {
        background-color: #2389A3;
        text-indent: 20px;
        font-size: .3rem;
        font-weight: bolder;
        color: #fff;
       line-height: 50px;
        overflow: hidden;
      }
      .news-new-list{
        li{
          &:hover{
            .date{
              i{
                color: #2389A3;
              }
              p{
                color: #2389A3;
              }
            }
            .word{
              a{
                color: #2389A3 !important;
              }
            }
          }
          border-bottom: 1px dashed #e5e5e5;
          margin: 15px 0;
          display: flex;
          padding-bottom: 10px;
          color: #fff;
          .date{
            border-right: 1px solid #d9d9d9;
            text-align: center;
            padding-right: 15px;
            display: flex;
            align-items: center;
            flex-direction: column;
            i{
              font-size: 22px;
              color: #2389A3;
            }
            p{
              color: #fff;
              font-size: .1rem;
            }
          }
          .word{
            width: 300px;
            margin-top: 4px;
            line-height: 24px;
            color: #fff;
            padding-left: 20px;
            font-size: .3rem;
          }
        }
      }
    }
  }
}
</style>
